MediaLiveのHTML5モーショングラフィックスオーバーレイを使ってライブ動画にダイナミックなテキスト情報を加えてみた
はじめに
清水です。先日のアップデートでAWS Elemental MediaLiveでHTML5モーショングラフィックスオーバーレイ機能が利用できるようになりました。
これまでもMediaLiveには静止画画像でのオーバーレイ機能はあったのですが（イメージオーバーレイ機能）、新たに加わったこのモーショングラフィックスオーバーレイ機能、注目するべきはHTML5コンテンツを利用することでMediaLiveでオーバーレイしている内容を動的に変えられることかと考えます。またこのMediaLiveでオーバーレイしているコンテンツ内容を動的に変更する際に、MediaLive側への操作は一切発生しないこともポイントです。例えば外部APIなどで表示したい情報を取得できるようにしておけば、HTML5内のJavaScriptでその情報を取得、MediaLive側にオーバーレイさせる、といったことが可能になります。
本エントリではこの動作の簡単なサンプルとして、実際に動的にテキスト情報が変化するHTML5ページ（ブラウザでリロードしなくても、ページ内のテキスト情報が変わる）を作成、これをMediaLiveのHTML5モーショングラフィックスオーバーレイで指定することで、ライブ動画内でオーバーレイしているテキスト情報を動的に変更してみたのでまとめてみます。
動的にテキスト情報が変わるHTML5ページの作成
まずは動的にテキスト情報が変わるHTML5ページを作成します。なお「動的に」という意味ですが、本エントリではブラウザのリロードをするこなく、という意味で使用します。つまり「ブラウザのリロードをすることなくテキスト情報が変わるHTMLページ」です。具体的にイメージしやすいよう、作成したものを動画でまとめてみました。
右側のChromeブラウザ上のページが、「動的にテキスト情報が変わるHTML5ページ」です。左側のターミナルでは、Webサーバが稼働しているEC2にSSH接続しています。こちらはAmazon Linux 2 on EC2環境にApache HTTP Server (httpd)をインストールしたものです。テキストエディタ（Emacs）でdata.jsonファイルを編集、上書きすると（Emacsの最下部、ミニバッファにWrote /var/www/html/dynamic-motion-graphics-overlay/data.jsonが表示されるタイミング）、しばらくしてChromeで表示させているページのテキストが変わります。
このページは以下の4つのファイル群で作成しました。なお、筆者はHTMLコーディングが不得手で、数年ぶりぐらいにこのようなページを（見様見真似で）作成したぐあいです。最新化されていない古い知識を使いまわしている状態だったりするので、HTMLページのコーディング方法としては最適でないかと思います。あくまで参考としてご確認いただければと思います。
HTMLコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>Dynamic! motion grahpics overlay</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@700&display=swap" rel="stylesheet">
<link href="./stylesheet.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="./javascript.js"></script>
</head>
<body>
<div id="output-text">テキストデータ</div>
</body>
</html>
6行目、7行目でWebフォントであるGoogle Fontsを読み込んでいます。これはフォントの指定を行わなかった場合に、MediaLiveでモーショングラフィックスオーバーレイをした際、日本語が文字化け（いわゆる豆腐化）してしまったため、日本語対応のWebフォントを使用しています。8行目で実際のスタイルシート設定を読み込みます。
9行目はjQueryの読み込み、実際のJavaScriptコードを10行目で読み込みます。
HTMLページのbody要素は、13行目に示す通り、id属性を持ったdivタグのテキストデータがあるだけです。この部分をJavaScriptで変更していきます。
動的にページを変更しているJavaScriptコード
function pollingFunction() {
var interval_sec = 5;
setTimeout("pollingFunction()", interval_sec * 1000);
updateFunction();
}
function updateFunction(){
let date = new Date();
let json_url = 'data.json?' + date.getTime();
$.ajax({url: json_url, dataType: 'json'})
.done(function(data){
$(data).each(function(){
$('#output-text').text(this.outputtext);})}
)
}
$(document).ready(function(){
pollingFunction();
} );
2つの関数で構成しました。1つ目の関数pollingFunction()ではsetTimeoutを使って、もう1つの関数updateFunction()を指定した秒数後（ここでは5秒後）に繰り返し実行します。updateFunction()ではjQueryを使ったAjax通信でdata.jsonを読み込み、HTMLページのdivタグの中身を書き換えます。5秒ごとにdata.jsonを読み込みHTMLページを書き換える処理となります。
またページ読み込み時に17-19行目の処理でpollingFunction()が呼び出されるようにしています。
スタイル情報を設定しているスタイルシート
body{
font-family: 'Noto Sans JP', sans-serif;
}
#output-text {
display : inline-block;
color : #ffffff; /* 文字の色 */
font-size : 36pt; /* 文字のサイズ */
letter-spacing : 4px; /* 文字間 */
text-shadow :
2px 2px 1px #003366,
-2px 2px 1px #003366,
2px -2px 1px #003366,
-2px -2px 1px #003366,
2px 0px 1px #003366,
0px 2px 1px #003366,
-2px 0px 1px #003366,
0px -2px 1px #003366; /* 文字の影 */
}
スタイルシートでは、body要素にWebフォントの指定、またid属性output-textを持つテキスト（つまり、HTMLページで表示しているテキスト）についてのスタイルを指定します。
このHTMLページで表示するテキストのスタイルについては、MediaLiveで動画にオーバーレイすることを考えたとき、 縁取り文字を使いたい！と思い、以下のサイトを参考に指定しました。
ページに表示するテキスト情報をデータにもつJSONファイル
[
{"outputtext": "テキスト情報"}
]
最後にテキスト情報をもつJSONデータです。outputtextという変数名に対応する値（value）をHTMLページに表示します。ここであればテキスト情報となり、この文字列を書き換えることで、HTMLページに表示されるテキスト情報も変わる、という具合です。
MediaLiveで動的にテキスト情報が変わるHTMLページをライブ動画にオーバーレイする
HTMLページの準備ができたら、実際にMediaLiveでライブ動画にHTMLページをオーバーレイしてみます。今回、出力先はAWS Elemental MediaStoreとして、MediaLiveのリソース（InputとChannel）を作成しました。以下、設定のポイントのみまとめていきます。
MediaLiveのChannel作成、Channel templateはLive event (HLS)を選択しました。ただ、Output groupsの設定でHLS outputsのうち_720p30以外を削除しています。
モーショングラフィックスオーバーレイの設定として、General settingsのMotion Graphics Configurationの項目、デフォルトで無効（Enable Motion graphics configurationがONになっていない）であるものを有効にします。またMotion Graphics InsertionのDISABLEDをENABLEDに変更します。Motion Graphics Settingsの項目はHTML motion graphicsのままにしておきます。（なお現状、これ以外に選択できる項目はないようです。）
Output groupsの設定ではさらに、HLS settingsの項目でCDN settingsについてHLS media storeを選択します。
HLS outputの_720p30の設定のうちStream settingsの項目にて、VideoのAspect Ratio、PAR ControlをSPECIFIED、PAR NumeratorとPAR Denominatorをそれぞれ1とします。
Channelリソース作成後、Channelをスタートさせます。映像はOBS Studiを使って打ち上げました。MediaLiveのスケジュールアクションを作成してモーショングラフィックスをオーバーレイします。URLは先ほどのEC2のフロントにALBを配置し、証明書を設定して独自ドメインでHTTPSアクセス可能にしたものを用意しました。（HTTPアクセスではどうやらうまく動作しないようでした。）
実際にvideojs-http-streaming(VideoJS HTTP Streaming/VHS)を使ってライブ動画を確認してみましょう。テキスト情報がオーバーレイされていますね。
ここから実際にdata.jsonを書き換え、その書き換えた内容でオーバーレイするグラフィックスが変わっていくのを確認してみましょう。動画でまとめてみました。
左側のターミナルでWebサーバにSSH接続しています。ここでテキストエディタ（Emacs）を用いてdata.jsonを書き換えていきます。右上がvideojs-http-streaming(VideoJS HTTP Streaming/VHS)で再生している、MediaLiveを経由したライブ動画配信映像です。右下はOBS StudioでMediaLiveに打ち上げている映像となります。
HLS配信で遅延が発生しているため、右上のMediaLiveからの配信動画は、リアルタイムである右下のOBS Studioの映像に比べて30秒ほど遅れています。リアルタイム映像（右下のOBS Studioの時刻）で5:22から15秒ごと（秒数で00、15、30）を目安にdata.jsonを上書きしました。（Emacsの最下部、ミニバッファにWrote /var/www/html/dynamic-motion-graphics-overlay/data.jsonが表示されるタイミングです。）実際に視聴できるライブ配信動画でも遅延のあとに、オーバーレイしている文字情報がdata.jsonで指定したものに変わることが確認できます。なお、ライブ配信動画内できっちりした（00、15、30の）タイミングでオーバーレイ内容が切り替わらないのは、data.jsonのAjaxでの取得間隔（5秒ごと）のズレが発生しているためです。
まとめ
AWS Elemental MediaLiveでアップデートされた新機能、HTML5モーショングラフィックスオーバーレイを使用して、MediaLive外のデータを操作することでオーバーレイの内容を変えてみました。これまでもイメージオーバーレイ機能を用いることでライブ配信中にオーバレイの内容を変更すること自体はできたかと思いますが、MediaLive側のスケジュールアクションでその都度変更することなり、操作が煩雑になっていたかと思います。また操作が煩雑な分、あまり凝ったこともできなかったのではないでしょうか。
HTML5モーショングラフィックスオーバーレイ機能を使えば、ライブ配信中の動的なオーバレイ内容の変更が容易に可能です。オーバーレイする情報の操作などはMediaLiveの外で完結するので、外部サイトなどからデータを取得してオーバーレイする、といったこともできます。これまでこのような凝った情報をオーバーレイさせる場合は、クラウドに映像を打ち上げる前、グラウンド環境にて実施する必要があったかと思います。これからはオリジナルの映像のみクラウドに打ち上げておき、その後の処理（テロップだったりスーパーだったりを付与する）はクラウド側で行う、なんてことができそうですね。この機能アップデート紹介のWhat's New冒頭部分「Today, we are excited to announce ~」のとおり、このHTML5モーショングラフィックスオーバーレイ機能、非常に多くの可能性を秘めたエキサイティングなアップデートだと思います。
なお、HTML5ページで動画再生をして、MediaLiveに打ち上げている動画にさらに動画のオーバーレイなんてできるのかな!?なんてことも思ってみたのですが、ドキュメントを確認したところ、videoタグとaudioタグは現時点ではサポートされていないようです。たしかに画像やテキスト情報のオーバーレイに比べると実現難易度が高そうですが、将来的にvideoタグとaudioタグまでサポートされるとより活用の幅が広がるのではないかと思いました。
![[update] AWS Elemental MediaLiveがbandwidth reduction filterをサポートしました！](https://images.ctfassets.net/ct0aopd36mqt/wp-thumbnail-67b7665ae5d1345fda4a806167cf3e15/f0bea672c2be37596ad375443efc5822/aws-elemental-medialive)
![[UPDATE] AWS Media ServicesがAV1エンコードでのライブ配信をサポートしました！](https://images.ctfassets.net/ct0aopd36mqt/wp-thumbnail-e924faf7705c83b73111cb0e9c63db29/f9e726b3d65bfffe9523b4bb410153a5/media-services)
